<template>
  <div class="example-demo ivu-col ivu-col-span-24">
    <h1>{{ msg }}</h1>
    <div>
      <Row>
        <Col span="21">
          <Input v-model="searchName" icon="ios-search-strong" @on-click="searchBook(searchName)" style="width:60%"  placeholder="请输入书名..."  size="large"></Input>
        </Col>
        <Col span="3">
          <Button type="ghost" @click="addBook = true" shape="circle">新增书籍</Button>
          <Button type="primary" @click="showAllBook" shape="circle">查看全部书籍</Button>
          <Modal v-model="addBook" title="添加书籍" @on-ok="add" @on-cancel="cancel">
            <Row>
              <Col span="4"><label>书籍名:</label></Col>
              <Col span="20"><Input v-model="newBook.name" size="large" placeholder="请输入书籍名"></Input></Col>
            </Row>
            <Row>
              <Col span="4"><label>出版年份:</label></Col>
              <Col span="20">
                <Date-picker type="date" placeholder="选择日期" v-model="newBook.age"></Date-picker>
              </Col>
            </Row>
            <Row>
              <Col span="4"><label>类型:</label></Col>
              <Col span="20">
                <Select v-model="newBook.type">
                  <Option v-for="type in bookTypeList" :value="type.value" :key="type">{{ type.label }}</Option>
                </Select>
              </Col>
            </Row>
          </Modal>
        </Col>
      </Row>
    </div>
    <Table border stripe :columns="columns1" :data="books"></Table>
  </div>
</template>



<script src="./hi.js"></script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1,
  h2 {
    font-weight: normal;
  }
  
  ul {
    list-style-type: none;
    padding: 0;
  }
  
  li {
    display: inline-block;
    margin: 0 10px;
  }
  
  a {
    color: #42b983;
  }
</style>
